<template>
  <div class="vs-center-map">
    <CmDetailInfo :data-list="infoList" :area-name="areaName" />
    <VsMapECharts
      class="map-charts"
      @on-back="onBackClickArea"
      ref="VsMapEChartsRefs"
    />
  </div>
</template>

<script>
import CmDetailInfo from "./DetailsInfo/index";
import VsMapECharts from "./EChartsMap/index";
import { getShowAreaData } from "./scripts/index";

export default {
  name: "VsCenterMap",
  components: { VsMapECharts, CmDetailInfo },
  filters: {},
  props: {},
  data() {
    return {
      areaName: "",
      infoList: [],
      rawData: [
        { name: "万州区", value: [108.380246, 30.807807] },
        { name: "合川区", value: [106.265554, 29.990993] },
        { name: "永川区", value: [105.894714, 29.348748] },
        { name: "南川区", value: [107.098153, 29.156646] },
        { name: "璧山区", value: [106.231126, 29.593581] },
        { name: "铜梁区", value: [106.054948, 29.839944] },
        { name: "潼南区", value: [105.841818, 30.189554] },
        { name: "荣昌区", value: [105.594061, 29.403627] },
        { name: "开州区", value: [108.413317, 31.167735] },
        { name: "梁平区", value: [107.800034, 30.672168] },
        { name: "武隆区", value: [107.75655, 29.32376] }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {
    this.init();
  },
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  methods: {
    init() {
      const { rawData } = this;
      this.areaName = rawData[0].name;
      this.infoList = getShowAreaData();
      this.$nextTick(() => {
        this.$refs.VsMapEChartsRefs.mapInit([...this.rawData]);
      });
    },
    onBackClickArea(areaName) {
      this.areaName = areaName;
      this.infoList = getShowAreaData();
    }
  }
};
</script>

<style lang="less">
.vs-center-map {
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 50vh;
  min-height: 470px !important;
  /*height: 54%;*/
  background: rgba(12, 26, 58, 0.1);
  border: 1px solid rgba(151, 151, 151, 0.2);
  display: flex;
  .map-charts {
    z-index: 10;
  }
}
</style>
